<template>
	<view class="pr">
		<image class="bg pa" src="/static/image/mine/bg.png" mode=""></image>
		<view class="main pa">
			<u-navbar title="" bgColor="#ffffff00"  :fixed="false" :autoBack="false">
				<template v-slot:left>
					<view ></view>
				</template>
			</u-navbar>

			<view class="xp32 ">
				<view class="xflex-x" @click="toPage('/pages/mine/user/user')">
					<img class="avatar xmr24" :src="userdata.data.avatar" alt="" />
					<view class="">
						<view class="name">
							{{userdata.data.nickname?userdata.data.nickname:'未登录，点击登录'}}
						</view>
						
						<view class="xflex1">
							<view class="vips xflex-x" v-if="userdata.data.level ">
								<image class="vipsicon" :src="userdata.data.level.icon" mode=""></image>
								<view class="vipsname">
									{{userdata.data.level.name}}
								</view>
								
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="vip xmb60 pr">
					<view class="vipbg pr" @click="toPage('/pages/mine/vip/vip')">
						<image class="vipbg pa" src="/static/image/mine/hy.png" mode=""></image>
						
						<view class="vipbox pa xflex-x">
							<image class="vipicon xmr10" src="/static/image/mine/hyicon.png" mode=""></image>
							
							<view class="xflex-x">
								<view class="vipbox-title xmr10">
									会员中心
								</view>
								<view class="vipbox-pillar xmr10">
									
								</view>
								<view class="vipbox-tips">
									为美好住宿提供更优选择
								</view>
								<image class="vipbox-icon xml10" src="/static/image/mine/icon.png" mode=""></image>
							</view>
							
						</view>
						
					</view>
					<view class="vipboxs pa">
						<view class="xflex-x-between xp32 xbs">
							<view class="vipboxs-title">
								订单信息
							</view>
							<view class="xflex-x" @click="toPage(order.list[0].path)">
								<view class="vipboxs-all">
									查看全部
								</view>
								<image class="vipboxs-next" src="/static/image/mine/xia.png" mode=""></image>
							</view>
						</view>
						
						<view class="order">
							<view class="order-item xflex-y-center" v-for="(item,index) in order.list" :key="index" @click="toPage(item.path)">
								<view class="pr">
									<image class="order-icon " :src="item.icon" mode=""></image>
									<view class="pa order-num" v-if="userdata&& userdata.data && userdata.data.order && userdata.data.order[item.incon]>0&& index != 4">
										{{userdata.data.order[item.incon] || ''}}
									</view>
								</view>
								<view class="order-text xmt20">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<view class="util xp32 xbs">
					<view class="vipboxs-title">
						订单信息
					</view>
					
					
					<view class="util-box">
						<view class="util-item " v-for="(item,index) in util.list" :key="index" @click="toPage(item.path)">
							
							<button class="xbutton xflex-y-center" open-type="contact" v-if="item.name == '联系平台'">
								<image class="util-img" :src="item.icon" mode=""></image>
								<view class="util-text">
									{{item.name}}
								</view>
							</button>
							
							<view class="xflex-y-center" v-else>
								<image class="util-img" :src="item.icon" mode=""></image>
								<view class="util-text">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					
					
				</view>
				
				
				
				<view class="shop pr xmt24">
					<image class="shop-bg pa" src="/static/image/mine/shopbg.png" mode=""></image>
					
					<view class="shop-title  pa">
						<view class="xflex-x" @click="toPages('/pagesA/page/mine/mine')">
							<view class="shop-titles">
								商家中心
							</view>
							<image class="shop-next" src="/static/image/mine/icon_jr@2x.png" mode=""></image>
						</view>
						
						<view class="shop-tips pa" v-if="userdata.data.is_partner == 0">
							您不是商家，请联系管理员
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="nullshow" mode="center" :round="18">
			<view class="popup pr xflex-y-center xjc">
			
				<view class="popup-title xmt40">
					提示
				</view>
		
				<view class="popup-content xmt50">
					功能开发中
				</view>
				<view class="popup-btn" @click="nullshow = false">
					我知道了
				</view>
			</view>
		</u-popup>
		
		<u-tabbar :value="2" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<template>
				<u-tabbar-item text="订酒店" @click="toReat('/pages/index/index')">
					<image :style="{width: '46rpx',height: '44rpx',}" slot="active-icon"
						src="/static/image/tabbar/home1.png"></image>
					<image :style="{width: '46rpx',height: '44rpx',}" slot="inactive-icon"
						src="/static/image/tabbar/home.png"></image>
				</u-tabbar-item>
		
				<u-tabbar-item @click="toReat('/pages/cart/cart')">
					<image :style="{width: '80rpx',height: '80rpx',}" slot="active-icon"
						src="/static/image/tabbar/add1.png"></image>
					<image :style="{width: '80rpx',height: '80rpx',}" slot="inactive-icon"
						src="/static/image/tabbar/add.png"></image>
				</u-tabbar-item>
		
				<u-tabbar-item text="我的" @click="toReat('/pages/mine/mine')">
					<image :style="{width: '46rpx',height: '44rpx',}" slot="active-icon"
						src="/static/image/tabbar/mine1.png"></image>
					<image :style="{width: '46rpx',height: '44rpx',}" slot="inactive-icon"
						src="/static/image/tabbar/mine.png"></image>
				</u-tabbar-item>
			</template>
		</u-tabbar>
		
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from "vue"
	import { useCounterStore } from '../../Store/user.js';
	const counter = useCounterStore()
	import {userInfo,indexcontent} from "../../network/home.js"
	let token = uni.getStorageSync("token")
	let test = ref("测试")
	const toReat = (url) =>{
		uni.reLaunch({
			url:url
		})
	}
	
	
	let nullshow = ref(false)
	
	let tab = reactive({
		list: [{
				type: 'solt',
				selected: '/static/image/tabbar/home.png',
				unselected: '/static/image/tabbar/home1.png',
				text: '首页',
				path:''
			},
			{
				type: 'solt',
				selected: '/static/image/tabbar/mine.png',
				unselected: '/static/image/tabbar/mine.png',
				path:''
			},
			{
				type: 'solt',
				selected: '/static/image/tabbar/mine.png',
				unselected: '/static/image/tabbar/mine.png',
				text: '我的',
				path:''
			}
		],
		style: {
			width: '46rpx',
			height: '44rpx',
		},
	})
	
	const toPage = (url) =>{
		if(!token){
			uni.navigateTo({
				url:"/pages/index/login"
			})
		}
		
		uni.navigateTo({
			url:url
		})
	}
	
	
	let order = reactive({
		list:[
			{
				name:'待发布',
				icon:'/static/image/mine/o1.png',
				path:'/pages/mine/order/myOrder?type=0',
				incon:'wait'
				
			},
			{
				name:'已发布',
				icon:'/static/image/mine/o2.png',
				path:'/pages/mine/order/myOrder?type=1',
				incon:'publish'
			},
			{
				name:'待入住',
				icon:'/static/image/mine/o3.png',
				path:'/pages/mine/order/myOrder?type=3',
				incon:'in'
			},
			{
				name:'待评价',
				icon:'/static/image/mine/o4.png',
				path:'/pages/mine/order/myOrder?type=4',
				incon:'comment'
			},
			{
				name:'已完成',
				icon:'/static/image/mine/o5.png',
				path:'/pages/mine/order/myOrder?type=5',
				incon:'complete'
			}
		]
	})
	
	let phone = ref('')
	indexcontent({
		name:'service_tel'
	}).then(res=>{
		phone.value = res.data
	})
	
	const toPages = (url) =>{
		
		if(userdata.data.is_partner == 0){
			uni.showModal({
				title: '提示',
				content: '你还未入驻商家，请联系客服处理',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
			return
		}
		
		uni.navigateTo({
			url:url
		})
	}
	
	
	let util = reactive({
		list:[
			{
				name:'优惠券',
				icon:'/static/image/mine/u1.png',
				path:'/pages/mine/coupon/coupon'
			},
			{
				name:'我的推荐',
				icon:'/static/image/mine/u2.png',
				path:'/pages/mine/recommend/recommend'
			},
			{
				name:'骊客金豆',
				icon:'/static/image/mine/u3.png',
				path:'/pages/mine/golden/golden'
			},
			{
				name:'会员权益',
				icon:'/static/image/mine/u4.png',
				path:'/pages/mine/vip/vip'
			},
			{
				name:'我的收藏',
				icon:'/static/image/mine/u5.png',
				path:'/pages/mine/myfavorite/myfavorite'
			},
			{
				name:'吐槽墙',
				icon:'/static/image/mine/u6.png',
				path:'/pages/mine/brilliant/brilliant'
			},
			{
				name:'合作通道',
				icon:'/static/image/mine/u7.png',
				path:'/pages/index/rich/rich?title=合作通道&name=cooperate_channel'
			},
			{
				name:'联系平台',
				icon:'/static/image/mine/u8.png',
				path:''
			},
			
		]
	})
	
	
	
	// 获取个人信息
	let userdata = reactive({
		data:''
	})
	
	onShow(()=>{
		getinfoss()
	})
	
	const getinfoss = () =>{
		if(token){
			userInfo().then(res=>{
				console.log(res);
				userdata.data = res.data
			})
		}
	}
	
	
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 746rpx;
		top: 0;
		z-index: 0;
	}

	.main {
		z-index: 1;
	}

	.avatar {
		width: 133rpx;
		height: 133rpx;
		border-radius: 50%;
		background-color: #333;
	}
	.name {
		font-size: 44rpx;
		color: #111111;
		text-align: left;
	}
	
	.vip {
		width: 690rpx;
		margin-top: 40rpx;
	}
	
	.vipbg {
		width: 100%;
		height: 188rpx;
		z-index: 0;
	}
	.vipbox {
		z-index: 1;
		padding: 21rpx 23rpx;
		box-sizing: border-box;
		&-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #532A00;
			
		}
		&-tips {
			font-weight: 500;
			font-size: 24rpx;
			color: #532A00;
		}
		&-pillar {
			width: 1rpx;
			height: 26rpx;
			background: #532A00;
		}
		&-icon {
			width: 20rpx;
			height: 20rpx;
		}
	}
	.vipicon {
		width: 70rpx;
		height: 70rpx;
	}
	.vipboxs {
		width: 690rpx;
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		width: 100%;
		top: 50px;
		&-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
		}

		&-next {
			width: 24rpx;
			height: 24rpx;
		}
		&-all {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			margin-right: 3rpx;
		}
	}
	
	
	.order {
		
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		
		
		&-item {
			
		}
		&-icon {
			width: 60rpx;
			height: 60rpx;
		}
		
		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
			
		}
		
		&-num {
			width: 24rpx;
			height: 24rpx;
			background: #F02020;
			border-radius: 50%;
			font-weight: bold;
			font-size: 18rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 24rpx;
			top: -12rpx;
			right: 0;
		}
		
	}
	
	.util {
		width: 690rpx;
		height: 405rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 100px;
		
		
		&-box {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 0 60rpx;
		}
		&-item {
			margin-top: 48rpx;
		}
		
		&-img {
			width: 56rpx;
			height: 56rpx;
		}
		&-text {
			font-weight: 500;
			font-size: 24rpx;
			color: #222222;
			margin-top: 20rpx;
		}
	}
	
	.shop {
		width: 100%;
		height: 140rpx;
		
		&-bg {
			width: 100%;
			height: 100%;
			z-index: 0;
		}
		&-title {
			padding: 29rpx;
			box-sizing: border-box;
			z-index: 4;
			width: 100%;
			
		}
		&-next {
			width: 28rpx;
			height: 28rpx;
		}
		
		&-titles {
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
			font-size: 32rpx;
			color: #004098;
			line-height: 40rpx;
			background: linear-gradient(0deg, #0DBFFB 0%, #198EFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-right: 10px;
		}
		&-tips {
			
			font-weight: 400;
			font-size: 20rpx;
			color: #777777;
			margin-top: 14rpx;
		}
	}
	
	
	.vips{
		// width: 180rpx;
		// width: 200rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(204,204,204,0.57);
		border-radius: 20rpx;
		margin-top: 21rpx;
		float: left;
	}
	
	.vipsicon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}
	
	.vipsname {
		
		height: 36rpx;
		// line-height: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #D2A528;
		line-height: 46rpx;
		padding-right: 17rpx;
		padding-bottom: 6px;
	}
	
	
	.popup {
		width: 600rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
		}
	
		&-content {
			padding: 32rpx;
			width: 492rpx;
			height: 149rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}
		
		&-btn {
			width: 240rpx;
			height: 80rpx;
			background-color: rgb(211,42,58);
			border-radius: 20rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>